<template>
	<div class="overlist bg-white">
		<ul class="look-history-contain" 
			v-infinite-scroll="loadData" 
			infinite-scroll-disabled="loading" 
			infinite-scroll-distance="10"
			v-if="flag"
		>
			<router-link tag="li"  class="mt30rem pl30rem pr30rem  bg-white" :to="'/detail/experience-detail/' + item.goods_id + '?status=2&ty=true'" v-for=" (item,index) in data" :key="index">
				<div class="layout  pb30rem  border-b">
					<img class="goods-img mr20rem" :src="img_url + item.pic_cover_mid" >
					<div class="goods-info flex_1">
						<h2 class="look-goods-name fs28rem bold c333 mb10rem">
							{{item.goods_name}}
						</h2>
						<span class="fs34rem cxo-red-color">
							￥ {{item.price}} 
						</span>
					</div>
				</div>
			</router-link>
		</ul>
		<template v-else>
			<default :imgUrl="img" explain='暂无商品'></default>
		</template>	
	</div>
</template>

<script>
import { getOverList } from "@/api/member";
import $toast from '@/utils/toast';
import Default from "@/components/Default";
import { InfiniteScroll } from 'mint-ui';
	export default{
		components: 
		{
			Default
		},
		directives:
		{
			InfiniteScroll
		},
		data()
		{
			return{
				loading      : false,
				flag         : true,
				img_url      : process.env.IMG_URL,
				data         : [],
				page_index   : 1
			}
		},
		methods:
		{
			loadData()
			{
				this.loading = true;
				var params = {
					page_index : this.page_index++,
					page_size  : 10
				}
				getOverList(params).then(res=>{
					if(res.data.length > 0 )
					{
						this.data = this.data.concat(res.data);
						this.loading = false;
					}					
					else if (params.page_index > 1)
					{
						$toast('没有更多了');
					}
					else
					{
						this.flag = false;
					}
					if(res.data.length < params.page_size)
					{
						this.loading = true;
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.overlist{
		.goods-img{
			width: 120/28rem;
			height: 120/28rem;
			object-fit: cover;
		}
	}
</style>